<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日账单</title>
    <link href="../css/bootstrap5.3.min.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script>
        let global_URL = '/huohuaqi'; 
    </script>
</head>

<body>
    <div id="dailybill" class="container">
        <!--        header 头部导航栏-->
        <div id="my_header"  class="row"> </div>  


        <!-- 欢迎页面 -->
        <h4 class="pb-3 pt-3 row" style="background-color: #afe298">
            欢迎使用, 【{{name}}】用户,  uid= [{{uid}}]
        </h4>
 
        <!-- 新增账单 -->
        <div  class="border border-info row pb-1">

            <h2 class="bg-default">新增账单</h2>

            <form class="row" @submit.prevent="insert_item">  
                <div class="col-sm-6 col-md-3">
                    <label class="" for="entry_time">账单日期:</label>
                    <input class="" type="date" id="entry_time" v-model="entry_time"  required>
                </div>    
                <div class="col-sm-6 col-md-3">
                    <label class="" for="money">金额:</label>
                    <input class="" type="text" id="money" v-model="money" autocomplete="off" required>
                </div>    
                <div class="col-sm-6 col-md-3">
                    <label class=" " for="intro">说明:</label>
                    <input class=" " type="text" id="intro" autocomplete="off" v-model="intro"  >
                </div>    
                <div class="col-sm-4 col-md-3">
                    <button type="submit" type="button" class="btn btn-success btn-sm"> 新增 </button>
                </div> 
            </form>
        </div>  

        <hr>

        <div  class="border border-info row pb-1" >
            <h2 class="bg-default">账单查询</h2>
            <div class="row" >  
                <div class="col-sm-6 col-md-3">
                    <label class="" for="begin_date">起始日期:</label>
                    <input class="" type="date" id="begin_date" v-model="begin_date"  required>
                </div>    
                <div class="col-sm-6 col-md-3">
                    <label class="" for="end_date">截止日期:</label>
                    <input class="" type="date" id="end_date" v-model="end_date"  required>
                </div>  
                <div class="col-sm-4 col-md-4">
                    <button @click="query_all" type="submit" type="button" class="btn btn-success btn-sm"> 查询 </button>
                    <span style="margin-left: 2rem;">合计：{{sum_of_bill.toFixed(2)}} </span>
                </div> 
            </div>
        </div> 

        数据展示
        <div  class="border border-info row" >
            <div v-for="(item,idx) in all_bill" :key="idx"   >
                <span class="hover-container col-md-2 col-2" style="font-size: large;  text-align: 1rem; padding: 10px;  display: inline-block;">
                    <button @click="delete_bill(item.billID)"  class="hidden-button">
                        X
                    </button>
                     {{idx+1}}
                </span>

                <span class="col-md-4 col-5"  style="font-size: 1.4rem;  text-align: right; padding: 8px;  display: inline-block;">
                    {{item.money.toFixed(2)}}
                </span>

                <span class="col-md-5 col-4"   style="padding-left:20px; font-size: 0.8rem; display: inline-block;" >
                    时间：{{item.entry_time}}, 备注：{{item.intro}}
                   
                </span> 

            </div>
        </div>


    </div>
</body>

<script src="../js/jquery-3.6.0.min.js"></script>

<script>
    $(function () {
        $("#my_header").load("../index_header.html");
    });
    function showmess(mess) {
        var div = $("<div class='mymess' >" + mess + "</div>");
        $("body").append(div); 

        var intv = setInterval(() => { 
            let top = div.css("top");
            top = parseInt(top.split("px")[0]);
            if (top > 500) {
                div.remove();
                clearInterval(intv);
            }
            div.css("top", (top + 5) + "px");
            div.css("opacity", 1 - (top / (800.0))); 
        }, 17);
    }
    // 获取当前日期 并且格式化
    function getCurrentDateFormatted() {  
        const today = new Date();  
        const year = today.getFullYear();    
        let month = today.getMonth() + 1;   // 月份是从0开始的，所以要加1  
        // 确保月份是两位数  
        month = month.toString().padStart(2, '0');   
        let day = today.getDate();   
        day = day.toString().padStart(2, '0');    
        return `${year}-${month}-${day}`;  
    }  

    const MyRedAX = axios.create({
        maxRedirects: 0
    });

    var app = new Vue({
        el: "#dailybill",
        data() {
            return {
                count: 1, // 定时器
                save_pwd: false, //是否保存密码
                uid: '',
                name: "",
                pwd: '',
                mess: '这是消息窗口',
                api_addr: global_URL, // 后端的接口端点，需要修改
                entry_time: '2024-07-07',
                money: '',
                intro: "", 
                all_bill: [],
                begin_date: '2024-07-07',
                end_date: '2024-07-07',
                sum_of_bill: 0
            };
        },
        methods: {
            get_my_info() {
                MyRedAX.get(this.api_addr + "/wechart/get_my_info")
                    .then(response => {
                        // 请求成功处理
                        console.log(response.data);
                        if (response.data.res == "Y") {
                            showmess("你已经登录");
                            this.name = response.data.name;
                            this.uid = response.data.uid; 
                            // 获取最新消息
                            this.query_all();
                        } else {
                            showmess("你未登录");
                        }
                    })
                    .catch(error => {
                        // 请求失败处理
                        // alert("catch error");
                        console.error(error);
                    });
            },
            insert_item() {
                // 使用axios发送  
                const formData = new FormData(); 
                formData.append('UID', this.uid);
                formData.append('entry_time', this.entry_time);
                formData.append("money", this.money);
                formData.append('intro', this.intro);

                let url = "/dailybill/insert";  
                // showmess("准备发送...");
                MyRedAX.post(this.api_addr + url, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data' // 设置请求头为multipart/form-data  
                    }
                })
                    .then(response => {
                        // 请求成功处理  
                        console.log(response.data); 
                        if (response.data == "Y") {
                            showmess("添加成功");
                            this.money = ''; // 清空金钱和说明
                            this.intro = "";
                            this.query_all();
                        } else {
                            showmess("添加失败");
                        }
                    })
                    .catch(error => {
                        // 请求失败处理  
                        alert("insert_item catch error");
                        console.error(error);
                    });
            },
            query_all() {
                // 使用axios发送GET请求  
                MyRedAX.get(this.api_addr + "/dailybill/queryOneUserAll", {
                    params: {
                        'UID': this.uid,
                        'begin_date': this.begin_date,
                        'end_date': this.end_date
                    } // 将数据作为查询参数发送
                }).then(response => {
                    console.log(response.status)
                    console.log(response.data); 
                    if (response.data.res == "Y") {
                        this.all_bill = response.data.arr; //.reverse();
                        this.sum_of_bill = 0;
                        for (let i = 0; i < this.all_bill.length; i++) {  
                            this.sum_of_bill += this.all_bill[i].money;
                        } 
                    } else {
                        alert("错误，无法获取最新数据，尝试刷新");
                        console.error(response.data);
                    }
                })
                    .catch(error => {
                        // 请求失败处理  
                        alert("query_all catch error");
                        console.error(error);
                    });
            },delete_bill(billID) {
                var userChoice = confirm("你确定要删除该账目？billID="+billID);   
                if ( ! userChoice) {   
                    return;
                }
                // 使用axios发送GET请求  
                MyRedAX.get(this.api_addr + "/dailybill/delete_bill", {
                    params: {
                        'billID': billID, 
                    } // 将数据作为查询参数发送
                }).then(response => {
                    console.log(response.status)
                    console.log(response.data); 
                    if (response.data == "Y") {
                        showmess("删除成功") 
                        this.query_all()
                    } else {
                        alert("错误，无法删除");
                        console.error(response.data);
                    }
                })
                    .catch(error => {
                        // 请求失败处理  
                        alert("query_all catch error");
                        console.error(error);
                    });
            }
        },
        mounted() {
            // 保存： wechart_user wechart_pwd 
            // 登陆
            this.get_my_info();  
                let now_date = getCurrentDateFormatted();
              console.log(now_date); // 输出类似于 "2023-06-15" 的字符串
              this.end_date=now_date;
              this.entry_time = now_date;
              this.begin_date = now_date.substring(0, now_date.length - 2) +  '01';

        },
        beforeDestroy() {
            // 销毁定时器  
            /*
            if (this.timer) {  
                clearInterval(this.timer);  
                this.timer = null;  
            }  */
        }
    });
</script>

<style>
    .mymess {
        left: 100px;
        top: 50px;
        position: fixed;
        border: 1px solid #e9c5c5;
        border-radius: 5px;
        text-align: center;
        padding: 10px;
        width: 350px;
        font-size: large;
        color: aliceblue;
        background-color: #000000;
        opacity: 1;
    }

    .hidden-button {  
        visibility: hidden; /* 初始时不可见 */  
        opacity: 0; /* 可选，增加淡入淡出效果 */  
        transition: visibility 0s, opacity 0.2s linear; /* 过渡效果 */  
        border-radius:50%; 
        width: 1rem; 
        height:1rem;
        padding:2px; 
        font-size:0.5rem; 
        border: none; 
        color: rgb(245, 240, 240);
        background: #ea716a
    }  
      
    .hover-container:hover .hidden-button {  
        visibility: visible; /* 鼠标悬浮时变为可见 */  
        opacity: 1; /* 淡入效果 */  
    }  
</style>

</html>